<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue </title>
    <script src="./js/vue.js"></script>
</head>

<body>
<div id="app">
    <p>总数：{{ total }}</p>
    <my-component :value="total" @input="inputFun"/>
</div>
<script>
    Vue.component('my-component', {
        template: '<button @click="handleClick">+1</button>',
        props: ['value'],
        data: function () {
            return {
                counter: this.value
            };
        },
        methods: {
            handleClick: function () {
                this.counter++;
                this.$emit('input', this.counter);
            }
        }
    });

    new Vue({
        el: '#app',
        data: {
            total: 5
        },
        methods: {
            inputFun: function (val) {
                this.total = val;
                console.info(val);
            }
        }
    })
</script>
</body>

</html>
